import Vue from 'vue'
import Vuex from 'vuex'
import {getList} from "../api/index"
import pinyin from 'js-pinyin'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[],
    newPyList:[]
  },
  mutations: {
    SET_LIST(state, data) {
      // console.log(data);
      //截取首字母
      const newArr = data.map((item) => {
        return {
          ...item,
          py: pinyin.getCamelChars(item.title)[0]
        }
      })
      //排序
      const sortArr = newArr.sort((a,b)=>{
        return a.py.charCodeAt() - b.py.charCodeAt()
      })

      const pyList = sortArr.map((item) => item.py)

      state.newPyList = [...new Set(pyList)]

      
      const arr = state.newPyList.map((item)=>{
        return {
          index:item,
          children:sortArr.filter(vla => vla.py === item)
        }
      })

      // console.log(arr);
      state.list = arr
    }
  },
  actions: {
    GET_LIST(context,data){
      getList().then((res)=>{
        context.commit('SET_LIST',res.data)
      })
    }
  },
  modules: {
  }
})
